<template>
  <div id="app" >
      <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive&&isRouterAlive"></router-view>
      <van-tabbar route v-model="active">
          <van-tabbar-item replace name="home" to="/" icon="home-o">首页</van-tabbar-item>
          <van-tabbar-item replace name="rankingList" to="/rankinglist" icon="chart-trending-o">排行榜</van-tabbar-item>
      </van-tabbar>
  </div>
</template>
<script>
    export default {
        provide(){
            return{
                reload:this.reload
            }
        },
        data(){
            return{
                style:'',
                active:'home',
                isRouterAlive:true
            }
        },
        methods:{
            reload(){
                this.isRouterAlive = false;
                this.$nextTick(function () {
                    this.isRouterAlive = true;
                })
            }
        }
    }
</script>
<style lang="less">
    @import "assets/iconfont/font.css";
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #000000;
}
html,body,#app{
    background-color: #ffffff;
  height: 100%;
}
.van-tabbar-item--active,.van-button--plain.van-button--info,.van-nav-bar__text,.van-nav-bar .van-icon,.van-picker__confirm{
    color: @green;
}
.van-calendar__selected-day{
    background-color: @green;
}
.van-button--info{
    border: 1px solid @green;
}
.van-tabs__line{
    background-color: @green;
}
.van-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 50px;
    z-index: 1 !important;
    width: 100%;
    /* height: 100%; */
    background-color: rgba(0, 0, 0, 0.5);
}
</style>
